<template>
    <div class="waitingFlash">
        <div class="narBar">
            <div class="statusBar"></div>
            <div class="navigator">
                <img src="../../assets/img/common/leftB.png" @click="goBack()">
            </div>
        </div>
        <div class="progressDiv">
            <div class="popContent">
                <p class="progressP">
                    <span class="progress-tip poptext">
                        {{ progressTip }}
                    </span>
                    <span class="progress-value popnumber">
                        {{ progress }}%
                    </span>
                </p>
                <van-progress class="custom-progress" :percentage="progress" pivot-text="" pivot-color="#0340F1"
                    stroke-width="8"
                    color="linear-gradient(to right, RGBA(164, 207, 251, 1), RGBA(97, 167, 237, 1))" />
                <div class="centerView">
                    <p>当日首次查询耗时稍长，正在努力为您获取最新数据，请耐心等待</p>
                </div>
            </div>
        </div>

    </div>
</template>
<script lang="ts" setup name="waitingFlash">
import { onMounted, onUnmounted, watch, ref } from "vue"
const emits = defineEmits(['goBack'])
const statusBar = ref('')
const navigator = ref('')
const props = defineProps({
    progressTip: {
        type: String,
        default: ""
    },
    flashing: {
        type: Boolean,
        default: true
    }
})
const progress = ref(21)
let timer1: any = null
let timer2: any = null
let timer3: any = null
const beginProgress = () => {
    timer1 = setInterval(() => { if (progress.value < 80) progress.value += 3 }, 300)
    timer2 = setInterval(() => { if (progress.value < 90) progress.value += 1 }, 800)
    timer3 = setInterval(() => { if (progress.value < 98) progress.value += 1 }, 1100)
}
const endProgress = () => {
    progress.value = 100
    if (timer1) clearInterval(timer1)
    if (timer2) clearInterval(timer2)
    if (timer3) clearInterval(timer3)
    timer1 = null
    timer2 = null
    timer3 = null
}
watch(() => props.flashing, (newValue) => {
    if (newValue) {
        beginProgress()
    } else {
        endProgress()
    }
}, { immediate: true })

const goBack = () => {
    emits('goBack')
}

onMounted(async () => {
    statusBar.value = 'true'
    navigator.value = 'true'
    // statusBar.value = localStorage.getItem("statusBar") 
    // navigator.value = localStorage.getItem("navigator")

})
onUnmounted(() => {
    endProgress()
})
</script>

<style lang="less" scoped>
.waitingFlash {
    width: 100vw;
    height: 100vh;
    background: white;
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 14px;
    color: #333333;
    line-height: 20px;

    .narBar {
        width: 100%;

        .statusBar {
            width: 100%;
            // height: 44px;
            padding-top: 10px;
        }

        .navigator {
            overflow: hidden;
            padding: 0 15px;
            text-align: center;
            width: 100%;
            height: 44px;
            font-size: 16px;
            color: #fff;
            line-height: 44px;

            img {
                float: left;
                width: 16px;
                height: 19px;
                margin-top: 14px;
            }


        }
    }

    .progressDiv {
        height: calc(100% - 94px);
        background-color: RGBA(122, 123, 124, 1);
        width: 100%;
        padding: 20px 30px 18px 30px;
        box-sizing: border-box;

        .popContent {
            width: 70%;
            min-height: 160px;
            height: auto;
            margin: 0 auto;
            margin-top: 30%;
            border-radius: 8px;
            background-color: RGBA(255, 255, 255, 1);
            padding: 16px;

            .progressP {
                width: 70%;
                margin-bottom: 10px;

                .poptext {
                    font-size: 16px;
                    font-weight: 600;
                }

                .popnumber {
                    font-size: 16px;
                    font-weight: 600;
                    margin-left: 8px;
                    color: RGBA(25, 138, 250, 1);
                }

            }
        }

        .custom-progress {
            // width: 300px;
            width: 100%;
            margin: 0 auto;
            margin-top: 16px
                /* 或者其他你需要的宽度 */
        }

        .centerView {
            width: 100%;
            text-align: left;
            // padding: 30px 35px 30px 35px;
            padding-top: 30px;
            box-sizing: border-box;
            color: rgba(34, 34, 34, 1);

            .waitingImg {
                width: 80%;
                //   margin-bottom: 20px;
                margin: 0 auto 20px;
            }
        }
    }


}
</style>